import React from "react";

import { Link, Outlet } from 'react-router-dom'

export default function Message() {
  const [messages] = React.useState([
    { id: 1, title: "消息1", content: "内容1" },
    { id: 2, title: "消息2", content: "内容2" },
    { id: 3, title: "消息3", content: "内容3" },
  ]);

  return (
    <div>
      <nav>
        <ul>
          {messages.map((m) => {
            // 向组件传递params参数
            return (
            //<li key={m.id} style={{listStyle:'none'}}>
            //  <Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>
            //</li>
            // 向组件传递search参数
            //<li key={m.id}>
            //  <Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>
            //</li>
            // 向组件传递state参数
            <li style={{listStyle:'none'}} key={m.id}>
              <Link replace={false} to={{pathname:"detail"}} 
                state={{id:m.id, title:m.title, content:m.content}}>{m.title}
              </Link>
            </li>
            )})}
        </ul>
      </nav>
      <Outlet />
    </div>
  )
}